<template>
    <div>
        <el-form :model="addMage" ref="addMage">

            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="addMage.messageTitle"  ></el-input>
            </el-form-item>

            <el-form-item label="内容" :label-width="formLabelWidth" >
                <el-input type="textarea"  :rows="15"  v-model="addMage.messageContent"></el-input>
            </el-form-item>
            <el-form-item label="接收人" :label-width="formLabelWidth">           
                <el-select
                  v-model="value"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="loading">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>                 
            </el-form-item>

        </el-form>

        <div style="margin-left: 120px;">
            <el-button type="primary" @click="add">发 送</el-button>
            <el-button @click="resetForm">重 置</el-button> 
        </div>
          
   
    </div>
</template>

<script>
import axios from 'axios';


export default {
    data(){
        return{
            pageNum:1,
            pageSize:1000,
            formLabelWidth: '120px', //新增表单宽度
            options: [],
            value: [],
            list: [],
            loading: false,
            states: [],
            addMage:{
              "ber": "",
                "creationTime": "",
                "id": 0,
                "mageRecipientsList": [],
                "messageContent": "",
                "messageSender": "",
                "messageTitle": "",
                "num": "",
                "recipName": ""
            },
           
        }
    },
    created(){
        this.initStudent()
    },
    methods:{
        add(){
          // 将 value 转换为集合，并赋值给 mageRecipientsList
          const uniqueRecipientsSet = new Set([...this.value]);
          this.addMage.mageRecipientsList = Array.from(uniqueRecipientsSet).map(item => ({ mageRecipients: item }));


            console.log('jdwqdiuhqie',this.addMage.mageRecipientsList);
            console.log('拿到的',this.addMage);
            
            axios.post("/api/mage/addMage",this.addMage).then(res=>{
                //弹框
                this.$message({
                    message: res.data.message,
                    type: 'success'
                    });
            })
        },

        resetForm(){
        this.addMage = {}
        },


        //列表
        initStudent(){
            axios.get("/api/student/findStudentNameList").then(res=>{
                this.states = res.data.data.map(item => item.userName)
                console.log( '集合',this.states);
                this.list = this.states.map(item => {
                  return { value: item, label: item };
                });

            })
        },

        remoteMethod(query) {
          if (query !== '') {
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
              this.options = this.list.filter(item => {
                return item.label.toLowerCase()
                  .indexOf(query.toLowerCase()) > -1;
              });
            }, 200);
          } else {
            this.options = [];
          }
        }
    }

}
</script>

<style scoped>

</style>